<template>
	<view>
     <view class="header">
        <view class="header_content">
          <view class="nickName point-text">可用积分</view>
          <view class="nickName point-num">{{filterChecked.add_comma_toThousands(pointsOverview.pointsBalance ? pointsOverview.pointsBalance :0)}}</view>
          <view class="nickName point-tip" style="display: none;">{{filterChecked.add_comma_toThousands(pointsOverview.expiringPoints ? pointsOverview.expiringPoints :0)}}</label>积分将{{pointsOverview.expiringDate ? '在'+ pointsOverview.expiringDate : ''}}过期</view>
        </view>
      </view>

      <view class="tabTitle">
        <label :class="obtainedTab ? 'act':''" @click="obtainedPoints">积分获取</label>
        <label :class="usedTab ? 'act':''" @click="usedPoints">积分消耗</label>
		<label :class="redeemTab ? 'act':''" @click="redeemDetail">兑礼明细</label>
      </view>

	  <view class="tabMain">
		<view class="block1" v-if="obtainedTab">
		  <view class="item" v-for="(incItem, incKey) in pointsList" :key="incKey" v-if="incItem.transactionType.operator == 'Inc'">
			<view class="h5"><label>{{incItem.transactionType.transactionTypeName}}</label><label>+{{incItem.increasePoints}}</label></view>
			<view class="time"><label>{{filterChecked.parseDate(incItem.createdAt)}}</label></view>
			<!--<label>{{incItem.paramsSnapshot.entityName}}</label>-->
		  </view>
		  <!--积分明细为空 样式需居中-->
		  <view v-if="pointsList.length < 1">
			 <label>暂无积分信息</label>
		  </view>
		</view>
		<view class="block1" v-if="usedTab">
		  <view  class="item" v-for="(decItem, incKey) in pointsList" :key="incKey" v-if="decItem.transactionType.operator == 'Exp' || decItem.transactionType.operator == 'Ded' || decItem.transactionType.operator == 'Dec'">
			<view class="h5"><label>{{decItem.transactionType.transactionTypeName}}</label><label>-{{decItem.decreasePoints}}</label></view>
			<view class="time"><label>{{filterChecked.parseDate(decItem.createdAt)}}</label></view>
			<!--<label>{{decItem.paramsSnapshot.entityName}}</label>-->
		  </view>

		  <view v-if="pointsList.length < 1">
			<label>暂无积分信息</label>
		  </view>
		</view>

		<view class="block1" v-if="redeemTab">
		  <view class="text-box" v-for="(orders, incKey) in giftOrders" :key="incKey">
			<p>{{filterChecked.parseGiftParams(orders.snapshot)}}</p>
			<p>兑换时间：{{filterChecked.parseDate(orders.createdAt)}}</p>
			<view v-if="orders.receiverName == null" class="empty-address">
				<p class="underline" @click="setShippingAddress(orders.id)">填写礼品寄送地址</p>
			</view>
			<view v-else>
				<p>寄送地址：{{orders.receiverName}}&nbsp;&nbsp;{{orders.receiverMobile}}&nbsp;&nbsp;{{orders.receiverCity}}&nbsp;&nbsp;{{orders.receiverDistrict}}&nbsp;&nbsp;{{orders.receiverAddress}}</p>
			</view>
		  </view>
		  <view v-if="giftOrderTotal < 1">
			<label>暂无兑换记录</label>
		  </view>
		</view>
	  </view>
	</view>
</template>

<script module="filterChecked" lang="wxs" src="../../../utils/filter.wxs"></script>
<script>
  import Vue from 'vue';
  import api from '@/api/api';
  import filter from '../../../utils/filter.wxs';
  import {CUSTOMER_INFO} from '../../../utils/constant'
	export default {
		data() {
			return {
				obtainedTab:true,
				usedTab:false,
				redeemTab:false,
				currentPage:0,
				pageSize:20,
				pointsList:[],
				pointsOverview:[],
				transactionTypes:[],
				pageTotal:0,
				//防止重复加载
				preventRepeatReuqest: false,
				giftOrders:[],
				giftPageSize:20,
				giftCurrentPage:0,
				giftOrderTotal:0,
        nowPages: '',
			}
		},

    onLoad(option) {
      let that = this;
	  //监听设置完礼品订单地址跳回兑换详情和积分中心跳转
	  if(option.source === 'address' || option.source === 'pointsCenter'){
		  that.redeemTab = true;
		  that.obtainedTab = false;
	  }
      that.pointsInfo();
      that.getPointsTransaction(that.currentPage);
	  that.giftOrderList(that.giftCurrentPage);
    let pages = getCurrentPages();
    var currPage = pages[pages.length - 1];
    this.nowPages = currPage.route;
    },
   onShow() {
      let that = this;
      getApp().cl_tracker.track('mini_program_view', {
        path: this.nowPages,
        pageName: '我的积分',
      })
    },

methods: {
	setShippingAddress(orderId){
		let that = this;
		uni.navigateTo({
		  url:'/pages/address/address?type=redeemGift&giftOrderId='+orderId
		})
	},
	giftOrderList:async function(currentPage){
		let that = this;
		let customerInfo = uni.getStorageSync(CUSTOMER_INFO) || {};
		const parmas = {
		  page: currentPage,
		  size: that.giftPageSize,
		  sort: 'CreatedAt',
		  sort_dir: 'DESC'
		}

		const json = await api.giftOrderList({
		  header: {'jwt': customerInfo.jwt},
		  query: parmas
		});
		if (json.code === 1000) {
		  let data = json.data;
		  that.giftOrderTotal = data.totalPages;
		  that.giftOrders = [...that.giftOrders, ...data.content];
		}

	},
	getPointsTransaction: async function(currentPage){
		let that = this;
		let customerInfo = uni.getStorageSync(CUSTOMER_INFO) || {};
		const parmas = {
		  page: currentPage,
		  size: that.pageSize,
		  sort: 'CreatedAt',
		  sort_dir: 'DESC'
		}

		const json = await api.pointsTransaction({
		  header: {'jwt': customerInfo.jwt},
		  query: parmas
		});
		if (json.code === 1000) {
		  let data = json.data;
		  that.pageTotal = data.totalPages;
		  that.pointsList = [...that.pointsList, ...data.content];
		}
	},


	/**
	* 积分总览
	* */
	pointsInfo: async function(){
		let that = this;
		let customerInfo = uni.getStorageSync(CUSTOMER_INFO) || {};
		const json = await api.pointsInfo({
		  header: {'jwt': customerInfo.jwt},
		});
		if (json.code === 1000) {
		  that.pointsOverview = json.data;
		}
	},

	obtainedPoints(){
		let that = this;
		that.obtainedTab = true;
		that.usedTab = false;
		that.redeemTab = false;
	},


	usedPoints(){
		let that = this;
		that.usedTab = true;
		that.obtainedTab = false;
		that.redeemTab = false;
	},

	redeemDetail(){
		let that = this;
		that.obtainedTab = false;
		that.usedTab = false;
		that.redeemTab = true;
	},

	//加载更多
	onReachBottom() {
		let that = this;
		//判断总页数是否大于翻页数
		if(that.redeemTab){
			if ((that.giftOrderTotal) > that.giftCurrentPage) {
			  //防止重复加载
			  if (that.preventRepeatReuqest) {
				return true;
			  }
			  that.preventRepeatReuqest = true;
			  that.giftCurrentPage++;
			  that.giftOrderList(that.giftCurrentPage);
			  that.preventRepeatReuqest = false;
			}
		}else if(that.usedTab){
			if ((that.pageTotal) > that.currentPage) {
			  //防止重复加载
			  if (that.preventRepeatReuqest) {
				return true;
			  }
			  that.preventRepeatReuqest = true;
			  that.currentPage++;
			  that.getPointsTransaction(that.currentPage);
			  that.preventRepeatReuqest = false;
			}
		}

	},

	onPullDownRefresh() {
		let that = this;
		wx.showNavigationBarLoading();    //在当前页面显示导航条加载动画
		if(that.usedTab){
			that.pointsList = [];
			that.currentPage = 1;
			that.getPointsTransaction(that.currentPage);
		}else if(that.redeemTab){
			that.giftOrders = [];
			that.giftCurrentPage = 1;
			that.giftOrderList(that.giftCurrentPage);
		}

		setTimeout(function () {
		  wx.hideNavigationBarLoading();    //在当前页面隐藏导航条加载动画
		  wx.stopPullDownRefresh();    //停止下拉动作
		}, 2000)
	}

	}
}
</script>

<style lang="less">
  .pointsBox{
    border:2rpx solid #ccc;
    margin:50rpx 35rpx;padding:30rpx;

    .total{display:flex;justify-content:space-between;}
    .total label{display: block;font-size:56rpx;line-height: 60rpx;}
    .tip{text-align: center;margin-top:30rpx;}
    .btn{
      background-color: #444;color:#fff;
      width:170rpx;height: 56rpx;
      line-height: 56rpx;margin-top: 32rpx;
    }
  }
  .tabTitle{display: flex;margin: 100rpx auto 0;justify-content: center;}
  .tabTitle label{width:35%;text-align: center;padding:16rpx 0;color:#999;font-size:30rpx;}
  /*.tabTitle label:first-child{border-right:2rpx solid #ccc;}*/
  .tabTitle label.act{color:#333;}
  .tabTitle label.act a{border-bottom: 1px solid #000;}
  .tabMain{margin-bottom:100rpx;padding: 50rpx 40rpx;}
  .tabMain .item{padding:50rpx;background: #efefef;}
  .tabMain .item:nth-child(2n){background: #f5f5f5;}
  .tabMain .item .h5{display: flex;justify-content: space-between;margin-bottom:18rpx;font-size:30rpx;}
  .tabMain .item .time{display: flex;justify-content: space-between;}
  .header {
    height: 350rpx;
    width: 750rpx;
    display: flex;
    align-items: center;
    /*background-image: url('https://efs-cloud-miniprogram-store-1252208446.cos.ap-shanghai.myqcloud.com/images/cos-miniprogram/point-center.jpg');*/
    background-image: url('https://efc-public-assets-1252208446.cos.ap-shanghai.myqcloud.com/images/crm/2020011519589.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .header_content {
    width: 100%;
    text-align: center;
  }
  .nickName {
    font-size: 36rpx;
    color: #fff;
    text-align: center;
    display: block;
    margin: 20rpx auto 0;
    letter-spacing: 3rpx;
  }
  .point-text{
    background-repeat: no-repeat;
    background-size: 5%;
    background-position: 38% center;
    /*background-image: url('https://efs-cloud-miniprogram-store-1252208446.cos.ap-shanghai.myqcloud.com/images/cos-miniprogram/point-icon.png');*/
  }
  .point-num{
    font-size: 50rpx;
  }
  .point-tip{
    font-size: 30rpx;
    letter-spacing: 1rpx;
    margin: 40rpx auto 0;
  }
    .tabMain .block1 view{
      font-size: 30rpx;
      text-align: center;
      color: #000;
    }

	.underline{
	  text-decoration: underline;
	}
	.empty-address{
		margin-top:20rpx;
	}
</style>
<style>
  .text-box{background-color:#f0f0f0;padding: 30rpx;}
  .text-box p{text-align: left !important;}
</style>
